import React, { Component } from 'react'
// import { animated, useSpring } from '@react-spring/web'
import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'
import { API } from '../../../../utils/api'
import styles from './index.module.css'
// import { node } from 'prop-types'

const titileSelectedStatus ={
  area: false,
  mode: false,
  price: false,
  more: false
}
const selectedValues = {
  area: ['area','null'],
  mode: ['null'],
  price: ['null'],
  more: []
}


export default class Filter extends Component {
  state = {
    titileSelectedStatus,
    //控制FilterPicker 或 FilterMore组件的展示或隐藏
    openType: '',
    //所有筛选条件数据
    filtersData:{},
    //筛选条件的选中值
    selectedValues
  }


  componentDidMount(){
    //获取到body
    this.htmlbody = document.body

    this.getFiltersData()

  }

//点击标题菜单实现高亮
  onTitleClick= type =>{
    //给body添加样式
    this.htmlbody.className = 'body-fixed'

    const {titileSelectedStatus,selectedValues } = this.state
    //创建新的标题选中状态对象
    const newTitleSelectedStatus = {...titileSelectedStatus}

    //遍历标题选中状态对象
    //对象中所有键的集合 ['area','mode','price','more']
    Object.keys(titileSelectedStatus).forEach( key =>{
        //key表示数组中的每一行，此处就是每一个标题的type值 ['area','mode','price','more']
        if(key === type){
          //当前标题
          newTitleSelectedStatus[type] = true
          return
        }
        //其它标题
        const selectedVal = selectedValues[key]
        if(key === 'area' && (selectedVal.length !==2 || selectedVal[0] !== 'area')){
          //高亮
          newTitleSelectedStatus[key] = true
        }else if (key === 'mode' && selectedVal[0] !== 'null'){
          //高亮
          newTitleSelectedStatus[key] = true
        }else if(key === 'price' && selectedVal[0] !== 'null'){
          newTitleSelectedStatus[key] = true
        }else if(key === 'more' && selectedVal.length !== 0){
          newTitleSelectedStatus[key] = true
          //更多选择项 FilterMore 组件
        }else{
          newTitleSelectedStatus[key] = false
        }
    })
    console.log(newTitleSelectedStatus);
    this.setState({
      openType: type,
      //更新使用新的标题选中状态更新
      titileSelectedStatus: newTitleSelectedStatus
    })
    // this.setState(prevState =>{
    //   return {
    //     titileSelectedStatus: {
    //       //获取当前对象中所有属性的值
    //       ...prevState.titileSelectedStatus,
    //       //后面的会把当前的给覆盖掉
    //       [type]:true
    //     },
    //     //展示对话框
    //     openType: type
    //   }
    // })
  }

  //封装获取所有筛选条件的方法
  async getFiltersData(){
    //获取当前定位城市ID
    const { value } = JSON.parse(localStorage.getItem('hkzf_city'))
    const res =  await API.get(`/houses/condition?id=${value}`)
    console.log(res);
    this.setState({
      filtersData: res.data.body
    })
  }

  //渲染FilterPicker组件的方法
  renderFilterPicker(){
    const { openType,filtersData:{area,subway,rentType,price},selectedValues } = this.state
    if(openType !== 'area' && openType !== 'mode' && openType !== 'price'){
      return null
    }
    //根据openType 来拿到当前筛选条件数据
    let data = []
    let cols = 3
    let defaultValue = selectedValues[openType]
    switch (openType ) {
      case 'area':
        //获取到区域数据
        data = [area,subway]
        cols = 3
        break;
      case 'mode':
        data = rentType
        cols = 1
        break;
      case 'price':
        data = price
        cols = 1
        break;
      default:
          break;
    }
    
    return <FilterPicker key={openType}  onCancel={this.onCancel} onSave={this.onSave} data={data} cols={cols} type={openType} defaultValue={defaultValue} /> 
    
  }

  //取消按钮（隐藏对话框）
  onCancel = (type) =>{
    this.htmlbody.className = ''
    const {titileSelectedStatus,selectedValues } = this.state
    //创建新的标题选中状态对象
    const newTitleSelectedStatus = {...titileSelectedStatus}
    const selectedVal = selectedValues[type]
    if(type === 'area' && (selectedVal.length !==2 || selectedVal[0] !== 'area')){
      //高亮
      newTitleSelectedStatus[type] = true
    }else if (type === 'mode' && selectedVal[0] !== 'null'){
      //高亮
      newTitleSelectedStatus[type] = true
    }else if(type === 'price' && selectedVal[0] !== 'null'){
      newTitleSelectedStatus[type] = true
    }else if(type === 'more' && selectedVal.length !== 0){
      newTitleSelectedStatus[type] = true
      //更多选择项 FilterMore 组件
    }else{
      newTitleSelectedStatus[type] = false
    }
    this.setState({
      openType: '',
      titileSelectedStatus:newTitleSelectedStatus
    })
  }

  //确定按钮 （隐藏对话框）
  onSave = (type,value) =>{
    this.htmlbody.className = ''

    console.log(type,value);
    //菜单高亮逻辑处理
    //其它标题
    const {titileSelectedStatus } = this.state
    //创建新的标题选中状态对象
    const newTitleSelectedStatus = {...titileSelectedStatus}
    const selectedVal = value
    if(type === 'area' && (selectedVal.length !==2 || selectedVal[0] !== 'area')){
      //高亮
      newTitleSelectedStatus[type] = true
    }else if (type === 'mode' && selectedVal[0] !== 'null'){
      //高亮
      newTitleSelectedStatus[type] = true
    }else if(type === 'price' && selectedVal[0] !== 'null'){
      newTitleSelectedStatus[type] = true
    }else if(type === 'more' && selectedVal.length !== 0){
      newTitleSelectedStatus[type] = true
      //更多选择项 FilterMore 组件
    }else{
      newTitleSelectedStatus[type] = false
    }
    const newSelectedValues = {
      ...this.state.selectedValues,
      //只更新当前type所选中的值
      [type]: value
    }
    console.log('最新的的选中值',newSelectedValues);

    //筛选条件数据

    //拿区域
    const { area,mode,price,more } = newSelectedValues
    const filters = {}
    const areaKey = area[0]
    let areaValue = 'null'
    if(area.length === 3 ){
      areaValue = area[2] !== 'null' ? area[2] : area[1]
    }
    filters[areaKey] = areaValue
    //方式和租金
    filters.mode = mode[0]
    filters.price = price[0]
    //更多筛选条件
    filters.more = more.join(',')
    
    //调用父组件中的方法，来将筛选数据传递给父组件
    this.props.onFilter(filters)

    this.setState({
      openType: '',
      //更新菜单高亮状态数据
      titileSelectedStatus:newTitleSelectedStatus,
      selectedValues:newSelectedValues
    })
  }

  //渲染FilterMore组件
  renderFilterMore(){
    const { openType,filtersData:{roomType,oriented,floor,characteristic},selectedValues } = this.state
    if(openType !== 'more'){
      return null
    }

    const data = {
      roomType,oriented,floor,characteristic
    }

    const defaultValue = selectedValues.more
    return <FilterMore data={data} type={openType} onSave={this.onSave} defaultValue={defaultValue} onCancel={this.onCancel} />

  }

  render() {
    const { titileSelectedStatus,openType } = this.state
    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        {openType === 'area' || openType === 'mode' || openType === 'price' ? (
            <div
            className={styles.mask}
            onClick={() => this.onCancel(openType)}
          />
        ) : null}

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle  titileSelectedStatus={titileSelectedStatus} onClick={this.onTitleClick} />

          {/* 前三个菜单对应的内容： 看是否展示FilterPicker */}
          {
            this.renderFilterPicker()
          }
          

          {/* 最后一个菜单对应的内容： */}
          {
            this.renderFilterMore()
          }
        </div>
      </div>
    )
  }
}
